<script setup>
const articleRank = ref([
  {
    title: '线上问题---又又又又又来生产事故ads',
  },
  {
    title: 'IntelliJ IDEA 2025.1 发布,仲达更新',
  },
  {
    title:
      '我是一款专门为掘友打造的学习记录工具，旨在帮助掘友在社区或其他学习场景下便捷记录学习内容',
  },
  {
    title: '安装掘金浏览器插件后，点击浏览器右上角的icon，面板中即包含笔记入口',
  },
  {
    title:
      '我是一款专门为掘友打造的学习记录工具，旨在帮助掘友在社区或其他学习场景下便捷记录学习内容，同时支持内容的多端同步',
  },
])
</script>

<template>
  <el-card class="px-10 card-border" shadow="never">
    <template #header>
      <div class="flex items-center justify-between py-5 us">
        <div class="f-c-c">
          <i class="i-me:hot mr-5 font-size-18" />
          <span class="font-size-14">文章榜</span>
        </div>
        <div class="f-c-c font-size-12 op-text cursor-pointer-text-hover">
          <i class="i-fe:rotate-cw mr-3" />换一换
        </div>
      </div>
    </template>
    <div class="min-h-100 flex-col">
      <el-empty
        v-if="articleRank.length === 0"
        description="这里什么也没有"
        class="us"
        :image-size="100"
      />
      <div
        v-for="(item, index) in articleRank"
        :key="index"
        class="mt-5 min-h-30 flex flex-1 items-center border-rd-5 px-8 us cursor-pointer-bg-hover"
      >
        <span
          class="mr-10 font-size-14 fw-800 font-[Archivo]"
          :class="`rank-${index + 1}`"
        >{{ index + 1 }}</span>
        <span class="line-clamp-1 flex-1 overflow-hidden font-size-14">
          {{ item.title }}</span>
      </div>
    </div>
    <template #footer>
      <div
        class="my-10 f-c-c font-size-14 op-text us cursor-pointer-text-hover"
      >
        <span>查看更多</span><i class="i-fe:chevron-right" />
      </div>
    </template>
  </el-card>
</template>

<style scoped>
:deep(.el-card__header) {
  padding: 10px 5px;
  letter-spacing: 0.5px;
}
:deep(.el-card__footer) {
  padding: 0;
  letter-spacing: 1px;
}
:deep(.el-card__body) {
  padding: 10px 0;
}
.rank-1 {
  background: linear-gradient(180deg, #f64242 20%, rgba(246, 66, 66, 0.4) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rank-2 {
  background: linear-gradient(180deg, #ff7426 20%, rgba(255, 116, 38, 0.4) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rank-3 {
  background: linear-gradient(180deg, #ffac0c 20%, rgba(255, 172, 12, 0.4) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rank-4,
.rank-5 {
  color: #999;
}
</style>
